<%@ include file="/common.jsp" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>公司管理</title>
</head>
<body>

<div class="container mt-5">

    <table class="table">
        <thead>
        <tr>
            <th>公司编号</th>
            <th>公司名称</th>
            <th>公司地址</th>
        </tr>
        </thead>
        <tbody id="companyTableBody">
        <!-- Table content will be dynamically populated here -->
        </tbody>
    </table>

    <!-- 分页 -->
    <div class="d-flex justify-content-between">
        <button class="btn btn-secondary" id="prevPageBtn">&lt; 上一页</button>
        <button class="btn btn-secondary" id="nextPageBtn">下一页 &gt;</button>
    </div>
</div>

<!-- 添加公司模态框 -->
<div class="modal fade" id="addCompanyModal" tabindex="-1" role="dialog" aria-labelledby="addCompanyModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addCompanyModalLabel">添加公司</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 添加公司表单 -->
                <form id="addCompanyForm">
                    <div class="form-group" style="display: none">
                        <label for="companyId">公司编号</label>
                        <input type="text" class="form-control" id="companyId" name="companyId">
                    </div>
                    <div class="form-group">
                        <label for="companyName">公司名称</label>
                        <input type="text" class="form-control" id="companyName" name="companyName">
                    </div>
                    <div class="form-group">
                        <label for="companyAddress">公司地址</label>
                        <input type="text" class="form-control" id="companyAddress" name="companyAddress">
                    </div>
                    <button type="submit" class="btn btn-primary">添加</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 编辑公司模态框 -->
<div class="modal fade" id="editCompanyModal" tabindex="-1" role="dialog" aria-labelledby="editCompanyModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editCompanyModalLabel">编辑公司</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 编辑公司表单 -->
                <form id="editCompanyForm">
                    <input type="hidden" id="editCompanyId" name="companyId">
                    <div class="form-group">
                        <label for="editCompanyName">公司名称</label>
                        <input type="text" class="form-control" id="editCompanyName" name="companyName">
                    </div>
                    <div class="form-group">
                        <label for="editCompanyAddress">公司地址</label>
                        <input type="text" class="form-control" id="editCompanyAddress" name="companyAddress">
                    </div>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 自定义JS -->
<script>
    // 加载公司数据的函数
    function loadCompanyData(start, pageSize) {
        $.ajax({
            url: "${pageContext.request.contextPath}/company?operation=getCompaniesByPage&start=" + start + "&pageSize=" + pageSize,
            type: "GET",
            dataType: "json",
            success: function (data) {
                // 清空表格内容
                $("#companyTableBody").empty();
                // 填充表格数据
                $.each(data.data, function (index, company) {
                    // 为每行添加data-id属性
                    $("#companyTableBody").append(
                        "<tr data-id='" + company.companyID + "'>" +
                        "<td>" + company.companyID + "</td>" +
                        "<td>" + company.companyName + "</td>" +
                        "<td>" + company.companyAddress + "</td>" +
                        "</tr>"
                    );
                });
            },
            error: function () {
                alert("获取数据时出错！");
            }
        });
    }

    // 提交添加公司表单的函数
    $("#addCompanyForm").submit(function (event) {
        event.preventDefault();
        $.ajax({
            url: "${pageContext.request.contextPath}/company?operation=addCompany",
            type: "POST",
            data: $(this).serialize(),
            dataType: "json",
            success: function (data) {
                // 添加成功后重新加载数据
                loadCompanyData(1, 5); // 添加后重新加载第一页数据
                // 重置表单并关闭模态框
                $("#addCompanyForm")[0].reset();
                $("#addCompanyModal").modal("hide");
                // 显示成功信息
                alert("公司添加成功！");
            },
            error: function () {
                alert("添加公司时出错！");
            }
        });
    });

    // 填充编辑公司模态框数据的函数
    function populateEditModal(companyID) {
        var companyRow = $("table tbody").find("tr[data-id='" + companyID + "']");
        var companyName = companyRow.find("td:eq(1)").text();
        var companyAddress = companyRow.find("td:eq(2)").text();

        // 填充表单字段
        $("#editCompanyId").val(companyID);
        $("#editCompanyName").val(companyName);
        $("#editCompanyAddress").val(companyAddress);
    }

    // 提交编辑公司表单的函数
    $("#editCompanyForm").submit(function (event) {
        event.preventDefault();
        $.ajax({
            url: "${pageContext.request.contextPath}/company?operation=updateCompany",
            type: "POST",
            data: $(this).serialize(),
            dataType: "json",
            success: function (data) {
                // 更新成功后重新加载数据
                loadCompanyData(1, 5); // 更新后重新加载第一页数据
                // 关闭模态框
                $("#editCompanyModal").modal("hide");
                // 显示成功信息
                alert("公司更新成功！");
            },
            error: function () {
                alert("更新公司时出错！");
            }
        });
    });

    // 处理编辑按钮点击的函数
    function editCompany(companyID) {
        populateEditModal(companyID);
        $("#editCompanyModal").modal("show");
    }

    // 删除公司的函数
    function deleteCompany(companyID) {
        if (confirm("确定要删除这个公司吗？")) {
            $.ajax({
                url: "${pageContext.request.contextPath}/company?operation=deleteCompany",
                type: "POST",
                data: {companyId: companyID},
                dataType: "json",
                success: function (data) {
                    // 删除成功后重新加载数据
                    loadCompanyData(1, 5); // 删除后重新加载第一页数据
                    // 显示成功信息
                    alert("公司删除成功！");
                },
                error: function () {
                    alert("删除公司时出错！");
                }
            });
        }
    }

    // 处理分页的函数
    $("#prevPageBtn").click(function () {
        // 获取当前页码
        var currentPage = parseInt($("#prevPageBtn").data("currentPage"));
        if (currentPage > 1) {
            // 加载上一页数据
            loadCompanyData(currentPage - 1, 5); // 假设每页5条数据
            $("#prevPageBtn").data("currentPage", currentPage - 1); // 更新当前页码
            $("#nextPageBtn").data("currentPage", currentPage - 1); // 更新下一页按钮的当前页码
        }
    });

    $("#nextPageBtn").click(function () {
        // 获取当前页码
        var currentPage = parseInt($("#nextPageBtn").data("currentPage"));
        // 加载下一页数据
        loadCompanyData(currentPage + 1, 5); // 假设每页5条数据
        $("#prevPageBtn").data("currentPage", currentPage + 1); // 更新上一页按钮的当前页码
        $("#nextPageBtn").data("currentPage", currentPage + 1); // 更新当前页码
    });

    $(document).ready(function () {
        // 页面加载时加载第一页公司数据
        loadCompanyData(1, 5); // 假设每页5条数据
        // 设置分页按钮的初始页码
        $("#prevPageBtn").data("currentPage", 1);
        $("#nextPageBtn").data("currentPage", 1);
    });

    // 手动移除模态框隐藏时的背景遮罩，防止黑色阴影
    $('#addCompanyModal, #editCompanyModal').on('hidden.bs.modal', function () {
        $('.modal-backdrop').remove();
    });
</script>

</body>
</html>
